import { Component, OnInit, Input, Output, EventEmitter, Renderer2, ViewEncapsulation } from '@angular/core';
import { LayerButtons } from './layer-item.model';

@Component({
  selector: 'ege-layer-item',
  templateUrl: './layer-item.component.html',
  styleUrls: ['./layer-item.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class LayerItemComponent implements OnInit {

  _checked: boolean = false;
  _title: string;
  _hasCheckbox: boolean = true;
  _loading: boolean = false;
  _disabled: boolean = false;
  _loadError: boolean = false;

  _buttons: LayerButtons;
  _draggable: boolean;

  @Output() checkedChange: EventEmitter<boolean> = new EventEmitter<boolean>();
  @Output() openTable: EventEmitter<any> = new EventEmitter<any>();
  @Output() reload: EventEmitter<any> = new EventEmitter();
  @Output() remove: EventEmitter<any> = new EventEmitter<any>();
  @Output() spatialQuery: EventEmitter<any> = new EventEmitter<any>();
  @Output() propertiesQuery: EventEmitter<any> = new EventEmitter<any>();

  @Input()
  set buttons(buttons: LayerButtons) {
    this._buttons = { 
      spaceQuery: {
        visible: false,
        disabled: true,
        dot: false
      },
      propertiesQuery: {
        visible: false,
        disabled: true,
        dot: false
      },
      viewTable: {
        visible: false,
        disabled: true,
        dot: false
      },
      menubar: {
        visible: false,
        disabled: true,
        dot: false
      },
      ...buttons 
    };
  }

  get buttons(): LayerButtons {
    return this._buttons;
  }

  @Input() 
  set draggable(value: boolean) {
    this._draggable = value;
  }

  get draggable(): boolean {
    return this._draggable;
  }

  @Input()
  set checked(value: boolean) {
    this._checked = value;
  }

  get checked(): boolean {
    return this._checked;
  }

  @Input() 
  set title(value: string) {
    this._title = value;
  }

  get title(): string {
    return this._title;
  }

  @Input()
  set hasCheckbox(value: boolean) {
    this._hasCheckbox = value;
  }

  get hasCheckbox(): boolean {
    return this._hasCheckbox;
  }

  @Input() 
  set loading(value: boolean) {
    this._loading = value;
  }
  
  get loading(): boolean {
    return this._loading;
  }

  @Input()
  set disabled(value: boolean) {
    this._disabled = value;
  }

  get disabled(): boolean {
    return this._disabled;
  }

  @Input()
  set loadError(value: boolean) {
    this._loadError = value;
  }

  get loadError(): boolean {
    return this._loadError;
  }

  constructor(
    private renderer: Renderer2
  ) { }

  ngOnInit() {
    
  }

  visibleChange(model: boolean): void {
    this.checkedChange.emit(this.checked);
  }

  onSpatialQuery(): void {
    this.spatialQuery.emit();
  }

  onPropertiesQuery(): void {
    this.propertiesQuery.emit();
  }

  useTableView(): void {
    this.openTable.emit();
  }

  onClickReload(): void {
    this.reload.emit();
  }

  onClickRemove(): void {
    this.remove.emit();
  } 

}
